<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>银行卡信息</title>
		 <%@include file="/WEB-INF/base.jspf"%> 
		<script src="/js/font_595888_1jlcfz62jg8vkj4i.js"></script>
		<script src="/js/clipboard.min.js"></script>
		<style type="text/css">
			.ul-i-tikuan .form-control {
				font-weight:bold;
			}
			.ul-i-tikuan li {
				margin-bottom:1vh;
			}
			.ul-i-tikuan li:last-child {
				margin-bottom:0;
			}
			#header-div > div {
				padding:10px 0;
				text-align: center;
				position: relative;
			}
			#header-div > div > a {
				position: absolute;
				top:50%;
				transform:translateY(-50%);	
				left:15px;			
			}
			
			#header-div > div :after {
				content:"";
				display: block;
				clear: both;
			}
			#header-div p {
				margin-bottom:0;
				background-color:white;
			}
			#form-i-saveInfo {
				overflow: auto;
				-webkit-overflow-scrolling : touch;
			}
			.span-c-passwordWrong {
				display: none;
			}
			.span-c-passwordWrong-active {
				display: block;
			}
			.div-c-submitBtnGroup span {
				border-radius: 0;
			}
			#myModal .modal-body .form-control {
				margin-bottom:10px;
				font-weight:bold;
			}
			.p-c-noticeText-modal {
				font-weight:bold;
			}
			.modal, .modal-backdrop {
				position: absolute;
			}
			
			
		</style>
	</head>
	<body>
		<div id="header-div" class="bg-theme col-xs-12 col-sm-4 col-sm-offset-4" style="position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;height:50px;line-height:50px;text-align: center;">
			<a id="a-i-backBtn" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
			<strong style="font-size: 20px;color: white;">银行卡信息</strong>
		</div>
			<div class="div-c-submitBtnGroup col-xs-12 col-sm-4 col-sm-offset-4" style="padding:0;">
			<div style="height: 48px;margin-top:20px;"></div>	
		<!-- <form id="form-i-saveInfo" method="post" style="padding:1vh;hieght:500px;"  action="../bank/save.do" class="col-xs-12 col-sm-4 col-sm-offset-4"> -->
			<c:if test="${bank.userid == null}">
			<p style="font-weight:bold;color:black;" class="p-c-notRegister">你还未注册银行卡信息，请先注册。</p>
			</c:if>
			<p style="display:flex;align-items:center;font-weight:bold;font-size:12px;color:red;">请输入真实有效信息，避免造成提现失败。</p>				
				<input name="id" value="${bank.id}" hidden />
				<input  name="zhifupass" id="input-i-zhifuPassValue" value="${zhifupass}" hidden />
				<ul class="ul-i-tikuan" id="ul-i-twoDiv-2" style="margin-bottom: 50px;">
				<li><input placeholder="开户姓名" name="xingming" id="kaihuName-input-i" class="form-control cant-empty-inputs" value="${bank.xingming}" /></li>
				<li><select class="form-control" id="bankName-input-i" name="kaihuhang" value="${bank.kaihuhang}"  > 
					<option value="中国工商银行">中国工商银行</option>
					<option value="中国建设银行">中国建设银行</option>
					<option value="中国银行">中国银行</option>
					<option value="中国农业银行">中国农业银行</option>
					<option value="交通银行">交通银行</option>
					<option value="招商银行">招商银行</option>
					<option value="中信银行">中信银行</option>
					<option value="中国民生银行">中国民生银行</option>
					<option value="兴业银行">兴业银行</option>
					<option value="上海浦东发展银行">上海浦东发展银行</option>
					<option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
					<option value="中国光大银行">中国光大银行</option>
					<option value="平安银行">平安银行</option>
					<option value="华夏银行">华夏银行</option>
					<option value="北京银行">北京银行</option>
					<option value="广发银行">广发银行</option>
					<option value="上海银行">上海银行</option>
					<option value="江苏银行">江苏银行</option>
					<option value="恒丰银行">恒丰银行</option>
					<option value="浙商银行">浙商银行</option>
					<option value="南京银行">南京银行</option>
					<option value="宁波银行">宁波银行</option>
					<option value="渤海银行">渤海银行</option>
					<option value="杭州银行">杭州银行</option>
					<option value="东亚银行">东亚银行</option>
					<option value="深圳发展银行">深圳发展银行</option>
					<option value="厦门银行">厦门银行</option>
					<option value="广州农商银行">广州农商银行</option>
					<option value="广东农信">广东农信</option>
					<option value="广西农村信用社">广西农村信用社</option>
					<option value="福建农村信用社">福建农村信用社</option>
					<option value="贵州农村信用社">贵州农村信用社</option>
					<option value="桂林银行">桂林银行</option>
					<option value="东莞农村商业银行">东莞农村商业银行</option>
					<option value="深圳农商银行">深圳农商银行</option>
					<option value="佛山顺德农村商业银行">佛山顺德农村</option>
					<option value="贵阳银行">贵阳银行</option>
					<option value="柳州银行">柳州银行</option>
					<option value="浙江农村信用社">浙江农村信用社</option>
					<option value="东莞银行">东莞银行</option>						
				</select>
			</li>
			<li class="input-li-c"><input placeholder="开户支行" name="zhihang" id="shengfen-input-i" class="form-control cant-empty-inputs" value="${bank.zhihang}" /></li>
			<li class="input-li-c"><input placeholder="银行账号" name="bankNum" id="bankAccount-input-i" class="form-control cant-empty-inputs" value="${bank.bankNum}" /></li>
			<li class="input-li-c"><input placeholder="提款密码 (6-15位字母、数字)" name="zhifupass"	id="pass" type="password" class="form-control cant-empty-inputs"  value="${bank.zhifupass}" /></li>
		    <li class="input-li-c"><input placeholder="确认密码(6-15位字母、数字)"  name="zhifupass1" id="pass1"  type="password"  class="form-control cant-empty-inputs"  value="${bank.zhifupass}" /></li>
		</ul>	
		</div>		
	<!-- /form> -->
		<div class="div-c-submitBtnGroup col-xs-12 col-sm-4 col-sm-offset-4" style="position: fixed;bottom: 0;padding-left:0;padding-right:0;">
			
			<span style="font-size:20px;width:100%;background-color:#337ab7" class="form-control btn input-lg btn-primary" id="button-i-addNewBankCard">提交</span>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">付款密码</h4>
		            </div>
		            <div class="modal-body">
		    </div><!-- /.modal-dialog -->
		    </div>
		</div>
		</div>
		<div class="modal fade" id="submitPassWordmodal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">确认修改</h4>
		            </div>
		            <div class="modal-body">
		            <p class="p-c-noticeText-modal"></p>
		            <input placeholder="请输入当前密码" id="input-i-inputCurrentPass" type="password" class="input-lg form-control" />
	            	<span class="span-c-passwordWrong" style="color:red;font-weight:bold;margin-top:6px;">密码错误,请重新输入!</span>
		            </div> 
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary" id="button-i-EditBankCard-submit">确定</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal-dialog -->
		</div>	
		<div class="modal-div-fakeModal" id="div-i-noticeBankCard">
			<div class="div-c-modalContent">
				<h3 class="fakemodal-title"></h3>
				<div class="fakemodal-content"></div>
				<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	$sel = $("#bankName-input-i").find("option");
	for(var i=0; i<$sel.length;i++){
		if($("#bankName-input-i").attr("value")==$sel.eq(i).text()){
			$sel.eq(i).attr("selected","selected")
		}
	}
	
	if($(".cant-empty-inputs").val()!=""){
		$("input").attr("disabled","disabled")
		$("select").attr("disabled","disabled")
		$("#button-i-addNewBankCard")[0].style.display="none"
	}
	
	//kaihuhang
	//window.history.back(-1);
	var BANK_ACTIVITY_OBJ
	fixEditHeadAndFoot("#header-div", ".div-c-submitBtnGroup")
	var isRegister = "${bank.userid}"
 	 if (isRegister == "") {
	   ajax({
		  	url: "/act/allActivity.do",
			type: "post",
			data:{},
			success: function(data) {
				 var newData = JSON.parse(data)
				 if (newData.data === null) {
					return
				} 
				for(var i = 0;i < newData.data.length;i++){
					 if(newData.data[i].type == 0){
					 	showAlertNotice(newData.data[i].name, newData.data[i].alert1, "")
					 }
				 }
			},
			error: function(status) {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "请不要乱操作。。。")
			}
		})			 
	}
    var clipboard = new ClipboardJS('.btn-copyQQkefunumber',{
        text: function(trigger) {
            return BANK_ACTIVITY_OBJ.qq
        }
    }
    )      
    clipboard.on('success', function(e) {     
        e.clearSelection();      
    })
    $("body").on(getEndClickEvent(), ".btn-copyQQkefunumber", function() {
    	$(".hidden-notice").css("visibility", "visible")
    })
	
	$("#a-i-backBtn").on(getEndClickEvent(), function() {
			location.href = "/wd.do"
	})
	$("#button-i-justExit").on(getEndClickEvent(), function() {
		back()
	})
	var NUMBERS = "1234567890"
		var checkIsNumber = function(s1) {
			if (!s1) {
				return false
			}
			for (var i = 0; i < s1.length; i++) {
				var letter = s1[i]
				if (!NUMBERS.includes(letter)) {
					return false
				}
			}
			return true			
		}	
	var PASSWORD = "qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM0123456789"
	var checkPassWord = function(s2) {
		if (!s2) {
			return false
		}
		for (var j = 0; j < s2.length; j++) {
			var letter = s2[j]
			if (!PASSWORD.includes(letter)) {
				return false
			}
		}
		if (s2.length < 6 || s2.length > 16) {
			return false
		}
		return true
	}	

	// 账号 纯数字 >=16
 	var bindAddNewBankCardEvent = function() {
		var btn = document.querySelector("#button-i-addNewBankCard")
		btn.addEventListener(getEndClickEvent(), function(event) {
			if ("${user.state}" === "2") {
				showNormalNoticeModal("#div-i-noticeBankCard", "提示", "试玩账号无法绑定银行卡，请先注册为正式会员")
				return
			}			
			var allInputs = document.querySelectorAll(".cant-empty-inputs")
			for (var j = 0; j < allInputs.length; j++) {
				var input = allInputs[j]
				if (input.value == "") {
					showNormalNoticeModal("#div-i-noticeBankCard", "提示", "请填写完整的信息")
					return
				}
			}
			var accountValue = document.querySelector("#bankAccount-input-i").value
			if (!checkIsNumber(accountValue)) {
				showNormalNoticeModal("#div-i-noticeBankCard", "提示", "银行账号输入有误")
				return
			}
			if (accountValue.length < 16) {
				showNormalNoticeModal("#div-i-noticeBankCard", "提示", "银行账号格式有误")
				return
			}
			 var passwordValue = $("#pass").val()
			 if (!checkPassWord(passwordValue)) {
				alertme("密码必须是6~16位, 可包含字母以及数字")
				return							
			} 
			var repeatPassWordValue = $("#pass1").val()
			if (repeatPassWordValue != passwordValue) {
				alertme("两次密码输入不一致，请重新填写")
				return
			}	 
			var pNotice = document.querySelector(".p-c-notRegister")
			/* if (pNotice!=null && $("#input-i-zhifuPassValue").val() == "") {
				showNormalNoticeModal("#div-i-noticeBankCard", "提示", "你还未添加付款密码，无法提交")
				return
			} */
			if (pNotice != null) {
				ajax({
					url: "/bank/save1.do",
					type: "post",
					data: {
						"id": $("[name=id]").val(),
						"zhifupass": $("#pass1").val(),
						"xingming": $("[name=xingming]").val(),
						"kaihuhang": $("[name=kaihuhang]").val(),
						"zhihang": $("[name=zhihang]").val(),
						"kaihudizhi": $("[name=kaihudizhi]").val(),
						"bankNum": $("[name=bankNum]").val(),
					},
					success: function(data) {
						var newData = JSON.parse(data)
						if (newData.data == 1) {
							/* showNormalNoticeModal("#div-i-noticeBankCard", "提示", "恭喜你,绑定成功!") */
							setTimeout(function() {
								location.href = "/wd.do"
							}, 500)
						} else if(newData.data == 9){
							showNormalNoticeModal("#div-i-noticeBankCard", "提示", "此银行卡已绑定请联系客服人员注册账号")
						}else {
							showNormalNoticeModal("#div-i-noticeBankCard", "提示", "绑定失败,请稍后重试..")
						}
					},
					error: function(status) {
					}
				})				
			}
			else {
				if ($("#input-i-zhifuPassValue").val() == "") {
					$(".p-c-noticeText-modal").text("检测到你本次修改并没有添加新的付款密码，如需保持原付款密码修改，请直接输入当前密码，确认修改")
				} else {
					$(".p-c-noticeText-modal").text("检测到你本次修改添加了新的付款密码，请输入当前密码，确认修改")
				}
				 $("#submitPassWordmodal").modal("show")
			}
		})	
	}
	
	var setFormHeight = function() {
		//form-i-saveInfo
		/* var allHeight = document.documentElement.clientHeight
		var footerHeight = document.querySelector("#button-i-addNewBankCard").clientHeight
		var restHeight = allHeight - 87 - footerHeight
		document.querySelector("#form-i-saveInfo").style.height = restHeight + "px" */
	}
	
	 function jianrong() {
		/* 动态设置 html font-size, 使用 rem 适配 */
	 	var htmlSelector = document.documentElement
		var width = htmlSelector.clientWidth
		if (width > 600) {
			width = 600
		}
		var fSize = width / 7.5
		htmlSelector.style.fontSize = String(fSize) + "px"
		htmlSelector.dataset.fontrem = fSize.toFixed(2)
	}  
/*  	document.querySelector("#buttton-i-EditBankCard").addEventListener(getEndClickEvent(), function(event) {
	
		 var passwordValue = $("#pass").val()
		 if (!checkPassWord(passwordValue)) {
			alertme("密码必须是6~16位, 可包含字母以及数字")
			return							
		} 
		var repeatPassWordValue = $("#pass1").val()
		if (repeatPassWordValue != passwordValue) {
			alertme("两次密码输入不一致，请重新填写")
			return
		}	 
		$("#input-i-zhifuPassValue").val(passwordValue)
		$("#myModal").modal("hide")

	}) */
	$("#button-i-EditBankCard-submit").on(getEndClickEvent(), function(event) {
		ajax({
			url: "/bank/getBankid.do",
			type: "post",
			data: {},
			success: function(data) {
				var pass = JSON.parse(data).data.zhifupass
				if ($("#input-i-inputCurrentPass").val() != pass) {
					document.querySelector(".span-c-passwordWrong").classList.add("span-c-passwordWrong-active")
				} else {
					var url ="/bank/save1.do";
					var param = {
							"id": $("[name=id]").val(),
							"zhifupass": $("#pass1").val(),
							"xingming": $("[name=xingming]").val(),
							"kaihuhang": $("[name=kaihuhang]").val(),
							"zhihang": $("[name=zhihang]").val(),
							"kaihudizhi": $("[name=kaihudizhi]").val(),
							"bankNum": $("[name=bankNum]").val(),
					};
					$.post(url,param,function(data){
						$("#submitPassWordmodal").modal('hide');
						if(data.data==3){
							alert("恭喜你,修改成功!!");
						}else{
                            alert("修改失败,请稍后重试!!")							
						}
					});
				}
			},
			error: function(status) {
				console.log("status", status)
			}
		})		
	})
	jianrong()
	setFormHeight()
	bindAddNewBankCardEvent()
	$("#button-i-addPassWord").on(getEndClickEvent(), function(event) {
		if ("${user.state}" === "2") {
			showNormalNoticeModal("#div-i-noticeBankCard", "提示", "试玩账号无法绑定银行卡，请先注册为正式会员")
			return
		}
		$("#myModal").modal("show")
	})
	
	
	
	</script>
</html>